<!--品牌的kpi -->
<template>
  <div class="boxs">
    <div class="base-box" v-for="(d,key) in dataKpiList" :key="key" @click="handlePage">
      <img :src="getImageUrl({d,key})" />
      <div class="base-title">
        标准KPI：<i>{{d.kpi}}</i>
      </div>
      <span>{{d.kpi_name}}</span>
      <span>时效均值：{{d.all_brand_avg_kpi}}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, watch} from "vue";
import {getKpiReportApi} from "@/api/modules/base";

defineOptions({
  name: 'brandAndKpiView'
})

// 入参
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {
        brand: null,
        create_date: null
      }
    }
  }
})
// kpi 所有数据
let dataKpiList = ref([])
watch(
    () => props.params,
    async () => {
      await nextTick()
      await getKpiReport()
    },
    {
      deep: true
    }
)

// 获取图片路径
const getImageUrl = (params: {d: object,key: number}) =>{
  if( params.d.all_brand_avg_kpi > params.d.kpi ){
    return new URL(`../../../assets/icons/mark/icon-${params.key+1}-r.png`, import.meta.url).href;
  }else {
    return new URL(`../../../assets/icons/mark/icon-${params.key+1}-b.png`, import.meta.url).href;
  }
}

// 页面跳转
const handlePage = (kpi_name: string = '') => {
  window.location.href = `http://zst.zlocr.com:81/dashboard/kpi`
}

// 后端 kpi 数据
const getKpiReport = async () => {
  // KPI全部数据
  const {data} = await getKpiReportApi(props.params)
  dataKpiList.value = data
}
onMounted(()=>{
  getKpiReport()
})
</script>

<style lang="scss" scoped>

</style>
